<template>
  <div class="page-modal">
    <el-dialog title="" v-model="dialogVisible" width="50%" center destroy-on-close>
      <lz-form v-bind="searchFormConfig" v-model="formData"></lz-form>
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleQueryClick">Search</el-button>
          <el-button @click="handleResetClick">Reset</el-button>
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <!-- <el-button type="primary" @click="handleConfirmClick">
            Confirm
          </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineExpose, defineEmits } from 'vue'

import LzForm from '@/base-ui/form'

const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
})
const emits = defineEmits(['resetBtnClick', 'queryBtnClick'])

const dialogVisible = ref(false)
const formItems = props.searchFormConfig?.formItems ?? []
const formOriginData: any = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}
const formData = ref(formOriginData)

// 2.优化二: 当用户点击重置
const handleResetClick = () => {
  // for (const key in formOriginData) {
  //   formData.value[`${key}`] = formOriginData[key]
  // }
  formData.value = formOriginData
  emits('resetBtnClick')
}

// 3.优化三: 当用户点击搜索
const handleQueryClick = () => {
  emits('queryBtnClick', { filter_field: formData.value })
}

defineExpose({ dialogVisible })
</script>

<style scoped></style>
